<template>
    <div>
        <div class="authTitle">
            {{$i18n.t("btnControl./auth.setAuth")}}
        </div>
        <el-row>
            <!--:md="20" :sm="24" :xs="24"-->
            <el-col :md="4">
                <el-card class="user-card" shadow="hover">
                    <div slot="header">
                        <span>人员管理</span>
                    </div>
                    <el-tree
                        @node-click="handleClick"
                        :data="authUserList"
                        ref="userListTree"
                        node-key="user"
                        highlight-current
                        :props="{label:'user'}"
                    >
                    </el-tree>
                </el-card>

                <el-card class="menu-card" shadow="hover">
                    <div slot="header">
                        <span>授权菜单</span>
                    </div>
                    <el-tree
                        @node-click="handleMenuClick"
                        :data="menuList"
                        ref="menuListTree"
                        :default-checked-keys="authMenuTitle"
                        show-checkbox
                        node-key="title"
                    >
                         <span slot-scope="{ data }">
                           {{$i18n.t(data.title)}}
                         </span>
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :md="20">
                <group-permissions
                    :authBtn="authBtn"
                    :key="authBtn.join(',')"
                    ref="groupPermissions"
                    @updatePermissions="updatePermissions"
                >
                </group-permissions>
                <div class="autnBtn" v-if="userInfo.authBtn.includes('/user/setAuth')">
                    <el-button :size="customStyle.size" type="primary" @click="confirmEdit">确 定</el-button>
                    <el-button :size="customStyle.size" @click="goBack">取消</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import GroupPermissions from '@/components/group-permission'
import {getUser,getAuth,setAuth} from '@/api/user'
import {mapGetters} from "vuex";
import difference from 'lodash/difference'
import cloneDeep from 'lodash/cloneDeep'
import isEqual from 'lodash/isEqual'

export default {
    components: {
        GroupPermissions,
    },
    data() {
        return {
            allPermissions: [], // 所有权限
            permissions: [], // 最终选择的权限
            loading: false,
            authBtn:[],
            authMenuTitle:[],
            menuList:[],
            senduser:''
        }
    },
    computed:{
        ...mapGetters([
            'userList',
            'authList'
        ]),
        authUserList(){
            return (this.userInfo.authBtn.includes('/user/getAuth') && this.userList || [this.userInfo.username]).map(user=>({user}))
        }
    },
    created() {
        this.authBtn=cloneDeep(this.userInfo.authBtn)
        this.authMenuTitle=this.userInfo.authMenuTitle
        this.senduser=this.userInfo.username
        this.menuList=Object.keys(this.authList).map(title=>({title}))
        this.$nextTick(()=>{
            this.$refs.userListTree.setCurrentKey(this.userInfo.username)
        })
    },
    methods: {
        handleMenuClick(data){
        },
        handleClick(data){
            if(!this.userInfo.authBtn.includes('/user/getAuth')) return;
            this.senduser=data.user
            getAuth({senduser:data.user,username:this.userInfo.username}).then(res=>{
                this.authMenuTitle=res.data.authMenuTitle || []
                this.authBtn=res.data.authBtn || []
                this.$refs.menuListTree.setCheckedKeys(this.authMenuTitle)
            })
            this.authMenuTitle=[]
        },
        updatePermissions(permissions) {
            this.permissions = permissions
        },
        async confirmEdit() {
            // 判断是否更改了分组权限
            const deletePermissions=difference(this.authBtn,this.permissions)
            const addPermissions=difference(this.permissions,this.authBtn)
            const authMenu=this.$refs.menuListTree.getCheckedKeys()
            const isMenuEqual=isEqual(authMenu,this.authMenuTitle)
            if(addPermissions.length > 0 || deletePermissions.length > 0 || !isMenuEqual){
                setAuth({authMenu,username:this.userInfo.username,senduser:this.senduser,auth:[addPermissions,deletePermissions]}).then(res=>{
                    if(this.senduser===this.userInfo.username){
                        this.$store.commit('user/SET_USER_AUTHBTN',res.data.authBtn)
                        this.$store.commit('user/SET_USER_AUTHMENUTITLE',res.data.authMenuTitle)
                    }
                    !isMenuEqual && this.$refs.menuListTree.setCheckedKeys(res.data.authMenuTitle)
                    this.$message.success(res.msg)
                })
            }
        },
        goBack() {
            // this.$router.go(-1)
        },
    },
}
</script>

<style lang="scss" scoped>
.autnBtn {
    margin-left:20px;
}
.user-card {
    margin-bottom:20px;
}
.authTitle {
    height:60px;
    line-height:60px;
    font-size:16px;
    font-weight:500;
    margin-bottom:20px;
    border-bottom:1px solid #dae1ec;
    color:$theme-color;
}
</style>
